//首页  -- 文章发布页面
<template>
  <view class="status_bar">
    <!-- 自定义导航栏 -->
    <uni-nav-bar
      :statusBar="true"
      rightText="发布"
      left-icon="back"
      @clickLeft="back"
      @clickRight="submit"
    >
      <view class="title u-f-asb" @tap="changelook">
        {{ Privacy == 0 ? "所有人可见" : "仅自己可见" }}
        <view class="icon iconfont icon-xialazhankai"></view>
      </view>
    </uni-nav-bar>
    <!-- 多行输入框 -->
    <view style="padding: 15px 15px 0 15px">
      <textarea v-model="content" placeholder="说一句话吧~" />
    </view>
    <!-- 上传多图 -->
    <uploud-images @uploud="uploud"></uploud-images>
    <!-- 弹出公告 -->
    <uni-popup
      :show="showpopup"
      position="middle"
      mode="fixed"
      @hidePopup="hidePopup"
    >
      <view class="gonggao" v-show="showpopup">
        <view class="u-f-asb">
          <image
            src="https://i.loli.net/2020/11/25/ogPRUafQ5FOlErL.png"
            mode="widthFix"
          ></image>
        </view>
        <view>1.涉及黄色，政治，广告及骚扰信息</view>
        <view>2.涉及人身攻击</view>
        <view>3.留联系方式，透露他人隐私</view>
        <view>一经核实将被封禁，情节严重者永久封禁</view>
        <button type="default" @tap="hidePopup">朕知道了</button>
      </view>
    </uni-popup>

    <!-- 底部 -->
    <view class="u-f u-f-ac addinput-foot">
      <picker
        style="width: 50%"
        mode="selector"
        :range="postclass.range"
        @change="changePostClass"
      >
        <view class="u-f-asb">
          {{ postclass.title ? postclass.title : "选择分类" }}
        </view>
      </picker>

      <view
        class="u-f-asb"
        style="width: 50%"
        hover-class="addinput-foot-btn"
        @tap="changeTopic"
        >{{ topic.title ? topic.title : "选择话题" }}</view
      >
    </view>
  </view>
</template>

<script>
import uniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue";
import uploudImages from "../../components/common/upload-images";
import uniPopup from "../../components/uni-popup/uni-popup.vue";
let changelook = ["所有人可见", "仅自己可见"];
export default {
  components: {
    uniNavBar,
    uploudImages,
    uniPopup,
  },
  data() {
    return {
      Privacy: 0,
      content: "",
      imglist: [],
      newimglist: [],
      showpopup: true,
      isget: false,
      user_id: 0,
      postclass: {
        id: 0, // 当前选中分类id
        title: "", // 当前选中分类名称
        range: [], // 可选项
        list: [], // 服务端获取到的分类列表
      },
      topic: {
        id: 0, // 当前选中话题id
        title: "", // 当前选中话题名称
      },
    };
  },
  onBackPress() {
    if (!this.content && this.imglist.length < 1) {
      return;
    }
    if (!this.isget) {
      this.back();
      return true;
    }
  },
  onLoad() {
    this.user_id = uni.getStorageSync("userinfo").id;
    let postclass = uni.getStorageSync("tabBars");
    let arr = [];
    for (let i = 0; i < postclass.length; i++) {
      arr.push(postclass[i].name);
    }
    this.postclass.range = arr;
    this.postclass.list = postclass;

    // 监听所属话题选择
    uni.$on("changeTopic", (data) => {
      this.topic.id = data.id;
      this.topic.title = `#${data.title}#`;
    });

    // 读取缓存
    let res = uni.getStorageSync("addinput");
    // 在前面保存为草稿时
    if (res) {
      res = JSON.parse(res);
      this.imglist = res.titlepic;
      this.content = res.content;
      this.Privacy = res.isopen;
      this.topic = res.topic;
      this.postclass = res.postclass;
    }
  },

  methods: {
    // 返回
    // back() {
    //   uni.navigateBack({ delta: 1 });
    // },
    // 发布
    async submit() {
      // 判断是否有选择id
      if (!this.postclass.id) {
        return uni.showToast({
          title: "请选择分类",
          icon: "none",
        });
      }
      uni.showLoading({ title: "发布中...", mask: true });
      try {
        let [err, res] = await this.$http.post("/index/post/create", {
          titlepic: JSON.stringify(this.newimglist), //图片地址
          content: this.content, //文字
          isopen: this.Privacy, //隐私状态
          title: this.topic.title, //话题id
          post_class_id: this.postclass.id, //分类id,
          user_id: this.user_id,
        });

        // 发布成功
        uni.hideLoading();
        uni.showToast({
          title: "发布成功！",
        });
        uni.setStorageSync("tabIndex", this.postclass.id);
        uni.removeStorage({ key: "addinput" }); // 清除缓存
        this.isget = true;
        uni.switchTab({
          url: "/pages/index/index",
        });
      } catch (e) {
        return;
      }
    },
    // 隐私切换
    changelook() {
      uni.showActionSheet({
        itemList: changelook,
        success: (res) => {
          this.Privacy = res.tapIndex;
        },
      });
    },
    uploud(oldarr, newarr) {
      // 本地地址
      this.imglist = oldarr;
      // 上传到OSS地址
      this.newimglist = newarr;
    },
    hidePopup() {
      this.showpopup = false;
      console.log("yes ok");
    },
    // 保存为草稿
    back() {
      if (!this.text && this.imglist.length < 1) {
        uni.navigateBack({
          delta: 1,
        });
        return;
      }
      uni.showModal({
        content: "是否要保存为草稿？",
        showCancel: true,
        cancelText: "不保存",
        confirmText: "保存",
        success: (res) => {
          if (res.confirm) {
            // 本地存储
            let obj = {
              titlepic: this.imglist, //图片地址
              text: this.text, //文字
              isopen: this.Privacy, //隐私状态
              topic: this.topic, //话题
              postclass: this.postclass, //分类,
            };
            uni.setStorageSync("addinput", JSON.stringify(obj));
          } else {
            uni.removeStorage({ key: "addinput" }); // 清除缓存
          }
          this.isget = true;
          // uni.navigateBack({
          //   delta: 1,
          // });
          uni.switchTab({
            url: "/pages/index/index",
          });
        },
      });
    },
    changePostClass(e) {
      // 当前选中的id
      this.postclass.id = this.postclass.list[e.target.value].id;
      // 当前选中的名称
      this.postclass.title = this.postclass.list[e.target.value].name;
    },

    changeTopic() {
      uni.navigateTo({
        url: "/pages/topic-classfy/topic-classfy?ischange=" + true,
      });
    },
  },
};
</script>

<style>
.title {
  width: 100%;
}
.textarea {
  border-bottom: 1px solid #f5f5f5;
  height: 30vh;
}
.gonggao {
  width: 500upx;
}
.gonggao image {
  width: 75%;
  margin-bottom: 20upx;
}
.gonggao button {
  margin-top: 20upx;
  background: #ffe934;
  color: #171606;
}

.addinput-foot {
  background: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88upx;
  border-top: 1upx solid #dddddd;
}
.addinput-foot view {
  height: 100%;
}
.addinput-foot-btn {
  background: #f4f4f4;
}
</style>
